<template>
  <div v-loading="loading" class="wrap" element-loading-spinner="el-icon-loading" element-loading-text="等下,我正在请求">
    <basic-opt :has_left="false">
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" :header-cell-style="header_cell_style" :max-height="table_max_height" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="face_id" label="FACE_ID"></el-table-column>
        <el-table-column prop="href" label="图像">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.href" style="max-width:800px;max-height:800px;"/>
              <template #reference>
                <img :src="scope.row.href" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
  <div class="mobile-wrap">
    <div class="moblie-table-box">
      <el-table :data="data" :header-cell-style="header_cell_style" :max-height="mobile_table_max_height" stripe>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'

export default {
  mixins: [mixin],
  name: "device-user",
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          uuid: localStorage.getItem('device_uuid') ? localStorage.getItem('device_uuid') : '',
        }
        self.addPageInfo(params)
        let res = await API.deviceUser(params.uuid);
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },
    typeChange() {
      this.getSearchData();
    }
  }
}
</script>

<style scoped>

</style>